<template>
<div>
  <p><input type="text" v-model="name"></p>
  <p><input type="text" v-model="age"></p>
  <p>
    <select v-model="grade">
      <option :value="grade.id" v-for="grade in gradelist">{{grade.name}}</option>
    </select>
  </p>
  <button @click="postStudent">添加</button>
</div>
</template>

<script>
    export default {
        name: "Student",
      data(){
          return{
            name:'',
            age:'',
            grade:'',
            gradelist:[]
          }
      },
      methods:{
          postStudent(){
            let form_data=new FormData()
            form_data.append('name',this.name)
            form_data.append('age',this.age)
            form_data.append('grade',this.grade)
            this.$axios({
              url:'/app01/student/',
              method:'post',
              data:form_data
            })
            .then(res=>{
              console.log(res.data)
            })
          },
          getGrade(){
            this.$axios.get('app01/grade/')
            .then(res=>{
              console.log(res.data)
              this.gradelist=res.data
            })
          }
      },
      created() {
          this.getGrade()

      }
    }
</script>

<style scoped>

</style>
